import { Component } from 'react'
import { View ,Text} from '@tarojs/components'

import './index.scss'
import NoExploit from '../../components/NoExploit'
import Flight from '../../components/Flight'


const DEFAULT_TAB_LIST = [
  { title: "飞机", tab: "flight", index: 0 }
  ,{ title: "火车", tab: "train", index: 1 }
  ,{ title: "住宿", tab: "stay", index: 2 }
  ,{ title: "旅游", tab: "travel", index: 3 }
];

export default class Index extends Component {

  constructor(props) {
    super(props);
    this.state = {
      tabIndex:0
    };
  }

  switchTab = (index) => {
    this.setState({
      tabIndex: index,
    })
  }

  render () {
    const { tabIndex } = this.state
    const innerStyle = {
      width: `${100 / DEFAULT_TAB_LIST.length}%`,
      transform: `translateX(${tabIndex * 100}%)`
    }
    return (
      <View className='index'>
       <View className='index-container'>
        <View className='top'>
          <View className='index-tab'>
            {
              DEFAULT_TAB_LIST.map(item => (
                <View key={item.tab} className={`index_tab_item ${item.tab} ${tabIndex === item.index ? 'current' : ''}`} onClick={() => this.switchTab(item.index)}>
                  {item.title}
                </View>
              ))
            }
          </View>
          <View className='scrollbar' style={innerStyle}></View>
        </View>
         {
          DEFAULT_TAB_LIST[tabIndex]['tab'] === "flight" ? (
           <Flight />
          ) :  <NoExploit />
        } 
      </View>
      </View>
    )
  }
}
